<template lang="pug">
  .clearfix
    //- .form-shebao-title.font-16.font-weight 添加离职信息

    //- .clearfix.bg-white.pt-20.pr-20.pb-20.mb-20(:class="isOnlyView ? 'has-disabled' : ''")
    Modal(
      width="1000"
      v-model="isShowCreateDepartureInfoModal"
      title="添加离职信息"
      class-name="vertical-center-modal"
      @on-ok="postResignInfo"
      @on-cancel="cancel"
    )
      Form.clearfix(ref="formData" :model="formData" :rules="rules" :label-width="150")
        FormItem.form-item(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-show="item.isShow")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="isOnlyView ? '未填写' : item.placeholder")

          template(v-if="item.type === 'select'")
            Select(v-if="item.prop === 'haveCompensation'" v-model="formData[item.model]" :placeholder="isOnlyView ? '未填写' : item.placeholder" clearable :disabled="item.isDisabled || isOnlyView" @on-change="handleChangeHaveCompensation(item.model, $event)")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}

            Select(v-else v-model="formData[item.model]" :placeholder="isOnlyView ? '未填写' : item.placeholder" clearable :disabled="item.isDisabled || isOnlyView")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}

          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(:value="formData[item.model]" :placeholder="isOnlyView ? '未填写' : item.placeholder" type="date" :disabled="item.isDisabled || isOnlyView" @on-change="handleChangeDatePicker(item.model, $event)")

          template(v-if="item.type === 'interval'")
            DatePicker(:value="formData[item.model1]" :placeholder="item.placeholder1" type="date" :options="dateOptionsStart" @on-change="handleChangeDatePicker(item.model1, $event)")
            span.pl-10.pr-10 --
            DatePicker(:value="formData[item.model2]" :placeholder="item.placeholder2" type="date" :options="dateOptionsEnd" @on-change="handleChangeDatePicker(item.model2, $event)")

      //- .clearfix.text-center.mt-20.mb-20
      //-   Button.mr-10(type="info" @click="postResignInfo") 保存
      //-   Button 取消

    //- .clearfix.bg-white.pt-20.pr-20.pb-20.mb-20
    //-   Table(border :columns="lizhixinxiThead" :data="lizhiTableData" :stripe="true" ref="demoTable")
</template>

<script>
import { EmployeesApi } from '@/api/Employees.api.js'
export default {
  name: '',

  props: {
    isOnlyView: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      isShowCreateDepartureInfoModal: false,
      formData: {
        employeeId: null,
        resignType: null,
        resignReason: null,
        resignDate: '',
        approveDate: '',
        leaveDate: '',
        haveCompensation: 'true',
        amount: null,
        periodFrom: new Date(),
        periodTo: new Date()
      },
      formItem: [
        { type: 'select', label: '离职类型', placeholder: '请输入离职类型', prop: 'resignType', model: 'resignType', style: 'ivu-col-span-8', options: 'resignType', fn: 'customerChange', isShow: true },
        { type: 'input', label: '离职原因', placeholder: '请输入离职原因', prop: 'resignReason', model: 'resignReason', style: 'ivu-col-span-8', isShow: true },
        { type: 'datePicker', label: '离职申请书提交日期', placeholder: '请选择', prop: 'resignDate', model: 'resignDate', style: 'ivu-col-span-8', isShow: true },
        { type: 'datePicker', label: '离职申请批准日期', placeholder: '请选择', prop: 'approveDate', model: 'approveDate', style: 'ivu-col-span-8', isShow: true },
        { type: 'datePicker', label: '离职日期', placeholder: '请选择', prop: 'leaveDate', model: 'leaveDate', style: 'ivu-col-span-8', isShow: true },
        { type: 'select', label: '是否经济补偿金', placeholder: '请输入是否经济补偿金', prop: 'haveCompensation', model: 'haveCompensation', style: 'ivu-col-span-8', options: 'haveCompensation', fn: 'handleChangeHaveCompensation', isShow: true },
        { type: 'input', label: '经济补偿金额', placeholder: '请输入经济补偿金额', prop: 'amount', model: 'amount', style: 'ivu-col-span-8', isShow: true },
        { type: 'interval', label: '补偿时间段', placeholder1: '开始日期', prop1: 'periodFrom', model1: 'periodFrom', placeholder2: '结束日期', prop2: 'periodTo', model2: 'periodTo', style: 'ivu-col-span-16', isShow: true }
      ],
      rules: {},
      // startTimeDefault: new Date(),
      // endTimeDefault: new Date(),
      dateOptionsStart: {},
      dateOptionsEnd: {},
      arrListDown: {
        haveCompensation: [{ label: '有', value: 'true' }, { label: '无', value: 'false' }],
        resignType: [{ label: '辞职', value: '0' }, { label: '被解除', value: '1' }, { label: '辞退', value: '2' }],
        tempOps: []
      }
    }
  },

  watch: {
  },

  mounted () {
    this.formData.employeeId = this.$route.query.employeeId
  },

  methods: {
    ok () {
    },

    cancel () {
    },

    show () {
      Object.keys(this.formData).forEach(key => {
        if (key == 'haveCompensation') {
          this.formData[key] = 'true'
        } else if (key == 'resignDate' || key == 'approveDate' || key == 'leaveDate') {
          this.formData[key] = ''
        } else if (key == 'periodFrom' || key == 'periodTo') {
          this.formData[key] = new Date()
        } else {
          this.formData[key] = null
        }
      })
      this.formData.employeeId = this.$route.query.employeeId
      this.isShowCreateDepartureInfoModal = true
    },

    // 时间控件
    handleChangeDatePicker (model, value) {
      this.formData[model] = value
      console.log(this.formData[model] + ': ' + value)
    },

    handleChangeHaveCompensation (model, value) {
      console.log('value: ' + value)
      if (value == 'true') {
        this.formItem.map(item => {
          if (item.prop === 'amount' || item.prop1 === 'periodFrom') {
            item.isShow = true
          }
        })
        // this.formItem[6].isShow = true
        // this.formItem[7].isShow = true
      } else {
        this.formItem.map(item => {
          if (item.prop === 'amount' || item.prop1 === 'periodFrom') {
            item.isShow = false
          }
        })
        // this.formItem[6].isShow = false
        // this.formItem[7].isShow = false
      }
    },

    // 新增/修改离职信息
    async postResignInfo () {
      console.log('this.formData: ', this.formData)
      let res = await EmployeesApi.postResignInfo(this.formData)
      console.log('新增/修改离职信息: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.isShowCreateDepartureInfoModal = false
        this.$emit('postResignInfoOk')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style lang="less" scope>
</style>
